<template>
  <div>
    <el-form ref="deptForm" label-width="120px">
      <el-form-item label="部门名称" >
        <el-input
          v-model="form.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码">
        <el-input
          v-model="form.code"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-select
          v-model="form.manager"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in list"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍">
        <el-input
          v-model="form.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
        <el-button size="small" @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getEmployeeSimple } from "@/api/employees";
import { addDepartments,getDepartmentDetail,updataDepartments } from "@/api/departments";
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    isEmit:{
        type: Boolean,
        required: true,  
    }
  },
  data() {
    return {
      form: {
        name: "", //部门名称
        code: "", //部门编码
        manager: "", //部门负责人
        introduce: "", //部门介绍
      },
      list: [], //保存部门负责人的列表
    };
  },
//   页面一加载就渲染
  created() {
    this.loadEmployeeSimple();
    if(this.isEmit){   //如果有isEmit(是编辑状态)  渲染这个页面
        this.loadDepartmentDetail()
    }
  },
  methods: {
    // 编辑状态 获取部门详情 填充表单
    async loadDepartmentDetail(){
         try {
        const res = await getDepartmentDetail(this.id)
        console.log('getDepartmentDetail', res)
        // 保存数据
        if(res.code===10000){
            this.form=res.data  //将获取到的数据添加到form里  填充到表单中
        }
        
      } catch (err) {
        console.log('getDepartmentDetail', err)
      }
    },
    // 获取负责人列表
    async loadEmployeeSimple() {
      try {
        const res = await getEmployeeSimple();
        console.log("getEmployeeSimple", res); //res.data
        // 保存数据
        this.list = res.data;
      } catch (err) {
        console.log("getEmployeeSimple", err);
      }
    },
    // 实现新增
    async doAdd() {
      try {
        // 这里因为我们的form对象里面没有id  从父组件传了一个id  这里把传来的id和form 合并到一起 放到一个对象里  再上传
        const res = await addDepartments({ pid: this.id, ...this.form })
        console.log('res',res);
        // 关闭弹窗     重新渲染页面    子传父  
         this.$emit('success')
    
      } catch (error) {
        console.log(error);
      }
    },
    // 实现编辑
   async doEdit(){
      try {
        const res= await updataDepartments(this.form)
        console.log('updataDepartments',res);
        if(res.code!==10000) return this.$message.error(res.message)
        this.$message.success(res.message)
        // 重新渲染数据   关闭弹层
        this.$emit('success')
    } catch (error) {
        
    }
    },
    // 确定按钮
    hSubmit() {
     this.isEmit?this.doEdit(): this.doAdd();
    },
    // 取消按钮
    hCancel() {},
  },
};
</script>

<style>
</style>